import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import { useContext, useEffect } from 'react';
import { ICalibrateControllerContext } from '../../common/useOAContext';
import { Input, Spin } from 'antd';
import { useDescriptions, Descriptions } from '@/components/Descriptions';
import moment from 'moment';
import { downloadTemplate, getFileNameByPath, newGetFileNameNotType } from '@/utils';
import MyIcon from '@/components/MyIcon';
import { TagSelectNew as TagSelect } from '@/components/TagSelectNew';

export const DetailInfoCenterViewMainOA: React.FC = () => {
  /** 引入上下文 */
  const { styleFixCls, infoObj } = useContext(ICalibrateControllerContext);

  /** 初始化 */
  useEffect(() => {
    if (infoObj?.id) {
      setFieldsValue({
        ...infoObj,
        calibrateTime: infoObj?.calibrateTime ? moment(infoObj?.calibrateTime) : undefined,
      });
    }
  }, [infoObj]);

  /** 表格表单配置信息 */
  const [config, { setFieldsValue }] = useDescriptions({
    labelWidth: 200,
    schemas: [
      {
        label: '定标申请',
        field: 'Title',
        component: 'Title',
      },

      {
        label: '采购项目名称',
        field: 'purchProjectName',
        component: 'Input',
        disabled: true,
      },
      {
        label: '流水单号',
        field: 'calibrateCode',
        component: 'Input',
        disabled: true,
        initialValue: `DBSQ${moment().format('YYYYMMDD')}00000${Math.floor(Math.random() * 10)}`,
      },
      {
        label: '申请日期',
        field: 'calibrateTime',
        component: 'DatePicker',
        initialValue: moment(new Date(), 'YYYY-MM-DD'),
        required: true,
        disabled: true,
        message: '请选择申请日期',
      },
      {
        label: '承办人',
        field: 'ownerName',
        component: 'Input',
        required: true,
        message: '请输入承办人',
        disabled: true,
      },
      {
        label: '主办部门',
        field: 'ownDepartmentName',
        component: 'Input',
        required: true,
        message: '请输入主办部门',
        disabled: true,
      },
      {
        label: '联系电话',
        field: 'ownPhone',
        component: 'Input',
        message: '请输入联系电话',
        disabled: true,
      },
      // {
      //   label: '定标情况说明',
      //   field: 'calibrateContent',
      //   component: 'InputTextArea',
      //   maxLength: 200,
      //   showCount: true,
      //   colSpan: 2,
      //   autoSize: {
      //     minRows: 3,
      //     maxRows: 4,
      //   },
      //   required: true,
      //   message: '请输入定标情况说明',
      //   disabled: true,
      // },
      {
        label: '拟办意见',
        field: 'opinionInfo',
        component: 'InputTextArea',
        maxLength: 200,
        initialValue: '请办公室、科创部、人事部、发展部及外联部负责人会签，请董安有同志审批。',
        showCount: true,
        colSpan: 2,
        autoSize: {
          minRows: 3,
          maxRows: 4,
        },
        required: true,
        message: '请输入拟办意见',
        disabled: true,
      },
      {
        label: '定标方式',
        field: 'calibrationMethod',
        component: 'Render',
        colSpan: 2,
        required: true,
        slotRender: (text) => {
          return (
            <TagSelect
              colSpan={24}
              formLabel={''}
              formName={'calibrationMethod'}
              defalultKeys={Number(text)}
              radioList={[
                {
                  value: 0,
                  name: '线上会签',
                },
                {
                  value: 1,
                  name: '线下会议',
                },
              ]}
              radioDisabled={true}
            />
          );
        },
      },
      {
        label: '定标报告',
        field: 'attachURL',
        component: 'Render',
        colSpan: 2,
        slotRender: (text: string, record: Record<string, any>) => {
          const fileName = text ? getFileNameByPath(text) : '';
          return (
            <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', padding: 10 }}>
              {fileName ? (
                <>
                  <a
                    onClick={() => {
                      downloadTemplate('/purchaseNeedController/downloadFile', fileName, record?.attachURL, () => {});
                    }}
                  >
                    {/* {fileName} */}
                    <MyIcon type="icon-file-text-fill" />
                    &nbsp;
                    {newGetFileNameNotType(fileName, 7)}
                  </a>
                </>
              ) : (
                <Input disabled={true} placeholder="--" />
              )}
            </div>
          );
        },
        required: true,
        message: '请选择定标报告',
      },
    ],
  });

  return (
    <>
      <div className="commonTabsBodyDom">
        <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
          <ScrollBarLayout style={{ padding: '5px 100px' }}>
            <Spin spinning={false}>
              <Descriptions config={config} />
            </Spin>
          </ScrollBarLayout>
        </div>
      </div>
    </>
  );
};
